const productCom = Vue.component('product-com', {
  template: `<li >
                <h3>产品名称：{{product.title}}</h3>
                <h3>产品价格：{{product.price}}</h3>
                <button @click="ziyuanshuEvent(product.price)">点我</button>
                <slot></slot>
                </li>
                
                `,
  props: ['product', 'action'],
  data() {
    return {}
  },
  methods: {
    ziyuanshuEvent(price) {
      this.$parent.giveChildFun(price)
    },
  },
})

new Vue({
  el: '#app',
  data: {
    dianji: '',
    listData: [
      {
        title: '产品1',
        price: 123,
      },
      {
        title: '产品2',
        price: 34543,
      },
      {
        title: '产品3',
        price: 567756,
      },
    ],
  },
  components: {
    productCom,
  },
  methods: {
    giveChildFun(params) {
      this.dianji = params
      console.log(params)
      console.log('this is giveChildFun')
    },
  },
})
